<template>
    <div class="tags-wrapper">
        <ul class="tags-box">
            <li class="tags-li" :title="item.title" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
                <router-link :to="item.path" class="tags-li-title">
                    {{item.title}}
                </router-link>
                <span class="tags-li-icon" @click="closeTags(item)" v-if="item.path != '/home'"><i class="el-icon-close"></i></span>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags">
                <el-button size="small" type="primary">
                    标签选项<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    computed: {
        ...mapState(['tagsList']),
        showTags() {
            return this.tagsList.length > 0;
        }
    },
    watch:{
        $route(newValue, oldValue){
            this.setTags(newValue);
        }
    },
    created(){
        this.setTags(this.$route);
    },
    methods: {
        isActive(path) {
            return path === this.$route.fullPath;
        },
        handleTags(command){
            command === 'other' ? this.closeOther() : this.closeAll();
        },
        // 关闭单个标签
        closeTags(recode) {
            let tagsList = [];
            this.$store.commit('closeTags', {recode});
            return;
        },
        // 关闭全部标签
        closeAll(){
            if(this.$route.path == '/home'){
                this.closeOther();
            }else{
                this.$store.commit('changeValue', {
                    name: 'tagsList',
                    value: []
                })
                this.$router.push('/');
            }
        },
        // 关闭其他标签
        closeOther(){
            const curItem = this.tagsList.filter(item => {
                return item.path === this.$route.fullPath || item.path === '/indexpage';
            })
            this.$store.commit('changeValue', {
                name: 'tagsList',
                value: curItem
            })
        },
        // 设置标签
        setTags(route){
            let isExist;
            if(route.fullPath.indexOf('?') != -1 ){
                this.tagsList.forEach(item=>{
                    const _url = item.path.split('?')[0];
                    if(route.path === _url){
                        isExist = true;
                        item.path = route.fullPath;
                    }
                });
            }else{
                isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                })
            }
            !isExist && this.tagsList.push({
                title: route.meta.title,
                path: route.fullPath,
                name: route.matched[1].components.default.name
            })
            if(this.tagsList.length>10){
                this.tagsList.shift();
            }
        },
    },
}
</script>

<style lang="less">
    .tags-wrapper{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding-right: 2px;
        .tags-box{
            flex: 1;
            display: flex;
            align-items: center;
            .tags-li{
                margin: 2px 5px 2px 3px;
                border-radius: 3px;
                font-size: 12px;
                overflow: hidden;
                cursor: pointer;
                height: 30px;
                line-height: 30px;
                border: 1px solid #f7f7f7;
                background: #f7f7f7;
                padding: 0 5px 0 12px;
                vertical-align: middle;
                color: #666;
                &.active{
                    color: #fff;
                    border: 1px solid #ff6633;
                    background-color: #ff6633;
                    .tags-li-title{
                        color: #fff;
                    }
                }
                .tags-li-title{
                    max-width: 80px;
                    overflow: hidden;
                    white-space: nowrap;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    margin-right: 5px;
                    color: #666;
                }
            }
        }
        .tags-close-box{
            height: 36px;
            .el-dropdown{
                padding-top: 2px;
            }
        }
    }
</style>